﻿<Infrastructure:VisualStateAwarePage x:Name="pageRoot"
                                     x:Class="AdventureWorks.Shopper.Views.SearchResultsPage"
                                     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                                     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                                     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                                     xmlns:behaviors="using:AdventureWorks.Shopper.Behaviors"
                                     xmlns:interactivity="using:Microsoft.Xaml.Interactivity" xmlns:core="using:Microsoft.Xaml.Interactions.Core"
                                     xmlns:designViewModels="using:AdventureWorks.Shopper.DesignViewModels"
                                     xmlns:Views="using:AdventureWorks.Shopper.Views"
                                     xmlns:converters="using:AdventureWorks.Shopper.Converters"
                                     xmlns:Infrastructure="using:Microsoft.Practices.Prism.StoreApps"
                                     Infrastructure:ViewModelLocator.AutoWireViewModel="true"
                                     x:Uid="Page"
                                     mc:Ignorable="d"
                                     d:ExtensionType="Search"
                                     d:DataContext="{d:DesignInstance designViewModels:SearchResultsPageDesignViewModel, IsDesignTimeCreatable=True}">

    <Page.Resources>
        <converters:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
        <converters:BooleanNegationToVisibilityConverter x:Key="BooleanNegationToVisibilityConverter" />
        <DataTemplate x:Key="SearchResultsTemplate">
            <Grid MinWidth="420"
                  Margin="10,0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition MinWidth="150" Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}"
                        BorderBrush="White"
                        BorderThickness="2"
                        Width="150"
                        Height="100">
                    <Image Source="{Binding Image}"
                           Stretch="UniformToFill">
                        <interactivity:Interaction.Behaviors>
                            <core:IncrementalUpdateBehavior Phase="2"/>
                        </interactivity:Interaction.Behaviors>
                    </Image>
                </Border>
                <StackPanel Grid.Column="1"
                            Margin="10,-10,0,0" HorizontalAlignment="Stretch">
                    <TextBlock behaviors:HighlightSearchBehavior.SearchText="{Binding Title}"
                               behaviors:HighlightSearchBehavior.SearchTerm="{Binding DataContext.SearchTerm, ElementName=pageRoot}"
                               Margin="5"
                               FontSize="25"
                               Height="Auto"
                               MaxHeight="80"
                               TextWrapping="Wrap"
                               TextTrimming="WordEllipsis">
                        <interactivity:Interaction.Behaviors>
                            <core:IncrementalUpdateBehavior Phase="1"/>
                        </interactivity:Interaction.Behaviors>                        
                    </TextBlock>
                    <TextBlock Text="{Binding SalePrice}"
                               Style="{StaticResource BodyTextStyle}"
                               Margin="5"
                               FontSize="32"
                               FontWeight="ExtraBold">
                        <interactivity:Interaction.Behaviors>
                            <core:IncrementalUpdateBehavior Phase="2"/>
                        </interactivity:Interaction.Behaviors>                        
                    </TextBlock>
                </StackPanel>
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="SearchResultsTemplateMinimal">
            <Grid Margin="6,0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}"
                        BorderBrush="White"
                        BorderThickness="2"
                        Width="80"
                        Height="55"
                        Margin="0,10">
                    <Image Source="{Binding Image}"
                           Stretch="UniformToFill">
                        <interactivity:Interaction.Behaviors>
                            <core:IncrementalUpdateBehavior Phase="2"/>
                        </interactivity:Interaction.Behaviors>
                    </Image>
                </Border>
                <StackPanel Grid.Column="1"
                            Margin="10,0,0,0">
                    <TextBlock behaviors:HighlightSearchBehavior.SearchText="{Binding Title}"
                               behaviors:HighlightSearchBehavior.SearchTerm="{Binding DataContext.SearchTerm, ElementName=pageRoot}"
                               Margin="5"
                               FontSize="20"
                               Height="Auto"
                               MaxHeight="60"
                               TextWrapping="Wrap"
                               TextTrimming="WordEllipsis">
                        <interactivity:Interaction.Behaviors>
                            <core:IncrementalUpdateBehavior Phase="1"/>
                        </interactivity:Interaction.Behaviors>
                    </TextBlock>
                    <TextBlock Text="{Binding SalePrice}"
                               Style="{StaticResource BodyTextStyle}"
                               Margin="5"
                               FontSize="27"
                               FontWeight="ExtraBold">
                        <interactivity:Interaction.Behaviors>
                            <core:IncrementalUpdateBehavior Phase="2"/>
                        </interactivity:Interaction.Behaviors>
                    </TextBlock>

                </StackPanel>
            </Grid>
        </DataTemplate>

    </Page.Resources>
    <Page.TopAppBar>
        <AppBar Style="{StaticResource AppBarStyle}"
                x:Uid="TopAppBar">
            <Views:TopAppBarUserControl />
        </AppBar>
    </Page.TopAppBar>
    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Style="{StaticResource LayoutRootStyle}">
        <Grid.RowDefinitions>
            <RowDefinition Height="140" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!-- Back button, page title and subtitles-->
        <Grid x:Name="headerGrid">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="0" />
            </Grid.RowDefinitions>
            <Button x:Name="backButton"
                    Style="{StaticResource BackButtonStyle}"
                    Command="{Binding GoBackCommand, ElementName=pageRoot}" />
            <TextBlock x:Name="pageTitle"
                       x:Uid="searchPageTitle"
                       Grid.Column="1"
                       Text="Search"
                       IsHitTestVisible="false"
                       Style="{StaticResource PageHeaderTextStyle}" />
            <StackPanel x:Name="searchHeader" Orientation="Horizontal"
                        Grid.Column="2">
                <TextBlock x:Name="resultNumber"
                           x:Uid="ResultsNumberLabel"
                           Text="{Binding TotalCount}"
                           IsHitTestVisible="false"
                           Margin="0,0,10,40"
                           Style="{StaticResource PageSubheaderTextStyle}" />
                <TextBlock x:Name="resultText"
                           x:Uid="ResultsForLabel"
                           Text="Results for"
                           IsHitTestVisible="false"
                           Margin="0,0,10,40"
                           Style="{StaticResource PageSubheaderTextStyle}" />
                <TextBlock x:Name="queryText"
                           Text="{Binding QueryText}"
                           IsHitTestVisible="false"
                           Style="{StaticResource PageSubheaderTextStyle}" />
            </StackPanel>
        </Grid>

        <Grid x:Name="resultsPanel"
              Grid.Row="1"
              Visibility="{Binding NoResults, Converter={StaticResource BooleanNegationToVisibilityConverter}}">
            <!--
            The body of the page in most view states uses an items controls to create multiple radio buttons
            for filtering above a horizontal scrolling grid of search results
        -->
            <Grid x:Name="typicalPanel">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <GridView x:Name="itemsGridView"
                          AutomationProperties.AutomationId="ResultsGridView"
                          AutomationProperties.Name="Search Results"
                          TabIndex="1"
                          Grid.Row="1"
                          Padding="120,0,80,50"
                          SelectionMode="None"
                          IsItemClickEnabled="True"
                          ItemsSource="{Binding Results}"
                          ItemTemplate="{StaticResource SearchResultsTemplate}"
                          Loaded="itemsGridView_Loaded">
                    <interactivity:Interaction.Behaviors>
                        <core:EventTriggerBehavior EventName="ItemClick">
                            <behaviors:NavigateWithEventArgsToPageAction TargetPage="AdventureWorks.Shopper.Views.ItemDetailPage" EventArgsParameterPath="ClickedItem.ProductNumber"/>
                        </core:EventTriggerBehavior>
                    </interactivity:Interaction.Behaviors>
                    <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <ItemsWrapGrid />
                        </ItemsPanelTemplate>
                    </GridView.ItemsPanel>
                    <GridView.ItemContainerStyle>
                        <Style TargetType="Control">
                            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                            <Setter Property="Background"
                                    Value="{StaticResource AWShopperItemBackgroundBrush}" />
                            <Setter Property="Height"
                                    Value="130" />
                            <Setter Property="Margin"
                                    Value="0,0,38,8" />
                        </Style>
                    </GridView.ItemContainerStyle>
                </GridView>
            </Grid>

            <!--
                The body of the page when in minimal layout uses a combo box to select a filter above a
                vertical scrolling list of search results
            -->
            <Grid x:Name="minimalPanel"
                  Visibility="Collapsed">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>

                <ListView x:Name="resultsListView"
                          AutomationProperties.AutomationId="ResultsListView"
                          AutomationProperties.Name="Search Results"
                          TabIndex="1"
                          Grid.Row="1"
                          Margin="20,0,0,0"
                          Padding="0,0,0,60"
                          SelectionMode="None"
                          IsItemClickEnabled="True"
                          ItemsSource="{Binding Results}"
                          ItemTemplate="{StaticResource SearchResultsTemplateMinimal}">
                    <interactivity:Interaction.Behaviors>
                        <core:EventTriggerBehavior EventName="ItemClick">
                            <behaviors:NavigateWithEventArgsToPageAction TargetPage="AdventureWorks.Shopper.Views.ItemDetailPage" EventArgsParameterPath="ClickedItem.ProductNumber"/>
                        </core:EventTriggerBehavior>
                    </interactivity:Interaction.Behaviors>

                    <ListView.ItemContainerStyle>
                        <Style TargetType="Control">
                            <Setter Property="Background"
                                    Value="{StaticResource AWShopperItemBackgroundBrush}" />
                            <Setter Property="Height"
                                    Value="110" />
                            <Setter Property="Margin"
                                    Value="0,0,18,8" />
                        </Style>
                    </ListView.ItemContainerStyle>
                </ListView>
            </Grid>
        </Grid>

        <TextBlock x:Name="noResultsTextBlock"
                   x:Uid="NoSearchResultsLabel"
                   Grid.Row="1"
                   Margin="120,50,0,0"
                   Visibility="{Binding NoResults, Converter={StaticResource BooleanToVisibilityConverter}}"
                   Style="{StaticResource SubheaderTextStyle}"
                   Text="No products match your search." />

        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="DefaultLayout" />

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="PortraitLayout">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemsGridView"
                                                       Storyboard.TargetProperty="ItemsPanel">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource VerticalItemsStackPanelItemsPanel}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemsGridView"
                                                       Storyboard.TargetProperty="Padding">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="40,0,0,0" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemsGridView"
                                                       Storyboard.TargetProperty="(ScrollViewer.VerticalScrollMode)">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <ScrollMode>Enabled</ScrollMode>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemsGridView"
                                                       Storyboard.TargetProperty="(ScrollViewer.HorizontalScrollMode)">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <ScrollMode>Disabled</ScrollMode>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemsGridView"
                                                       Storyboard.TargetProperty="(ScrollViewer.VerticalScrollBarVisibility)">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <ScrollBarVisibility>Auto</ScrollBarVisibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemsGridView"
                                                       Storyboard.TargetProperty="(ScrollViewer.HorizontalScrollBarVisibility)">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <ScrollBarVisibility>Hidden</ScrollBarVisibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemsGridView"
                                                       Storyboard.TargetProperty="(ScrollViewer.ZoomMode)">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <ZoomMode>Disabled</ZoomMode>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!--
                    The back button and title have different styles when in minimal layout in addition to more extensive changes:
                    * The query text becomes the page header
                    * A different representation for filter selection and search results is used
                -->
                <VisualState x:Name="MinimalLayout">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource MinimalBackButtonStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource MinimalPageHeaderTextStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Grid.RowDefinitions[0].Height"
                                                       Storyboard.TargetName="headerGrid">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="80" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Grid.RowDefinitions[1].Height"
                                                       Storyboard.TargetName="headerGrid">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="60"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="resultNumber"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource BasicTextStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="resultText"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource BasicTextStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="queryText"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource BasicTextStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)"
                                                       Storyboard.TargetName="searchHeader">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Int32>1</x:Int32>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)"
                                                       Storyboard.TargetName="searchHeader">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Int32>1</x:Int32>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="typicalPanel"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Collapsed" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="minimalPanel"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Visible" />
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="noResultsTextBlock"
                                                       Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="20,0,0,0" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="noResultsTextBlock"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource BaselineTextStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</Infrastructure:VisualStateAwarePage>